<template>
	<view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">
		<!-- <view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
		<view class="warp">
			<c-gap height="180rpx" />
			<image class="logo_img" :src="$c.config.media + 'yeye/heart.png'" mode=""></image>
			<c-gap height="74rpx" />
			<view class="join_desc_text">友见介绍</view>
			<image class="join_desc" :src="$c.config.media + 'yeye/join_desc111.png'" mode=""></image>
			<c-gap height="30rpx" />
			<view class="maidian">
				<view class="item">
					<image class="join_desc" :src="$c.config.media + 'yeye/zhenshi.png'" mode=""></image>
					<view class="text">真实</view>
				</view>
				<view class="item">
					<image class="join_desc" :src="$c.config.media + 'yeye/gaoduan.png'" mode=""></image>
					<view class="text">高端</view>
				</view>
				<view class="item">
					<image class="join_desc" :src="$c.config.media + 'yeye/xinlai.png'" mode=""></image>
					<view class="text">信赖</view>
				</view>
				<view class="item">
					<image class="join_desc" :src="$c.config.media + 'yeye/quanwei.png'" mode=""></image>
					<view class="text">权威</view>
				</view>
			</view>
			<c-gap height="30rpx" />
			<view class="join-jieshao-warp">
				<view class="join-jieshao">声明</view>
				<view class="join-content">
					<view>1.aitaa致力于打造100%真实健康的平台；女性用户采用人脸识别认证，照片即真人！保证用户质量以及真实性。</view>
					<view>2.为过滤非诚意用户,避免微商、酒托、广告等骚扰，打造 纯净私密的空间，保证产品持续稳定运营。需支付 一定费用，即可永久加入</view>
					<view>3.保证绿色约会，绝不参加色情，赌博等违法行为。</view>
					<view>4.请务必确定您已满18岁，否则请勿参加。</view>
				</view>
			</view>

		</view>
		<c-gap height="60rpx" />

		<view class="join-btn" @tap="joinShow">立即加入</view>
		<c-gap height="60rpx" />

		<uni-popup ref="pay" type="bottom">
			<view class="pay-wrap">
				<view class="pay-title">支付</view>
				<view class="pay-why-title">为什么要付费？</view>
				<view class="pay-why-content">为过滤非诚意用户,避免微商、酒托、广告等骚扰，打造 纯净私密的空间，保证产品持续稳定运营。需支付 一定费用，即可永久加入</view>
				<view class="pay-tips">如遇支付问题，请联系客服解决</view>
				<view class="pay-money">￥{{ configData.price }}/永久</view>
				<view class="pay-project">支付总额</view>
				<view class="vip-kaitong" @tap="pay">立即支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$c: this.$c,
				configData: {
					price: 28
				},
				timer: null,

				param: {
					pay_type: 5,
					user_id: '',
					package_id: 3,
					vip_package_id: 4,
					code: '',
					promoter_user_id: ''
				}
			};
		},
		onUnload() {
			console.log('onUnload');
			clearInterval(this.timer);
		},
		async onLoad() {
			clearInterval(this.timer);
			// 刷新用户数据  会员或者没票首页
			this.timer = setInterval(() => {
				this.getUserInfo();
			}, 3000);
		},
		methods: {
			async getUserInfo() {
				// 是会员  或者 已经购买门票
				let res = await this.$c.post('/apa/user/myUserInfo', {}, {}, false);
				let userInfo = res.data.userInfo;
				console.log(userInfo);
				// if (userInfo.is_vip || userInfo.authentication) {
					this.$c.jump('/pages/home/home', 3);
				// }
			},

			joinShow() {
				this.$refs.pay.open();
			},
			pay() {
				let res; // 请求结果
				// let param = { total_amount: amount }; // 请求参数
				let data = {}; // 支付参数
				// 非H5
				// #ifndef H5
				uni.getProvider({
					service: 'oauth',
					success: (providerRes) => {
						uni.login({
							provider: providerRes.provider,
							success: async (loginRes) => {
								// 微信支付
								this.param.code = loginRes.code; // 微信登录code

								// 小程序
								// #ifdef MP-WEIXIN
								this.param.payment = 'wechat_mini';
								data.provider = 'wxpay';
								// #endif

								// 请求充值参数
								res = await this.$c.post('/apa/user/createBuyVipOrder', this
									.param);
								if (res.status === 0) {
									console.log(res);
									return;
								}
								// 合并数据
								data = Object.assign(data, res.data.mhtpInfo);

								// 发起支付
								uni.requestPayment({
									...data,
									success: (res) => {
										let user = uni.getStorageSync('user');
										user.authentication = 1;
										uni.setStorageSync('user', user);
										this.$c.jump('/pages/home/home', 3);
									},
									fail: (err) => {
										this.$c.show('支付失败');
									}
								});
								console.log('data', data);
							}
						});
					}
				});
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		min-height: 100vh;
		background-size: 750rpx 100vh;
		//background-repeat: no-repeat;
		background-position: 0 0;

		.warp {
			width: 702rpx;
			margin: 0 auto;

			.logo_img {
				margin: 0 auto;
				display: block;
				width: 428rpx;
				height: 390rpx;
			}

			.join_desc_text {
				margin: 0 auto;
				width: 128rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-weight: 600;
				text-shadow: 0px 10px 24px rgba(247, 195, 138, 0.21);

				font-size: 32rpx;
				color: #ff1c77;
				line-height: 44rpx;
				text-shadow: 0px 10px 24px rgba(247, 195, 138, 0.21);
			}

			.join_desc {
				margin: 0 auto;
				display: block;
				width: 306rpx;
				height: 18rpx;
			}

			.maidian {
				margin: 0 auto;
				width: 650rpx;
				display: flex;
				justify-content: space-between;

				.item {
					image {
						display: block;
						width: 90rpx;
						height: 90rpx;
					}

					.text {
						text-align: center;
						width: 90rpx;
						height: 50rpx;
						font-size: 24rpx;

						line-height: 50rpx;
					}
				}
			}




			.join-jieshao-warp {

				background: #fff;
				width: 702rpx;
				border-radius: 20rpx;
				margin: 0 auto;

				padding: 20rpx 28rpx;
				box-sizing: border-box;


				.join-jieshao {
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
					padding: 20rpx 28rpx;
					box-sizing: border-box;
				}

				.join-content {
					font-size: 24rpx;
					font-weight: 400;
					color: #B3B3B3;
					line-height: 44rpx;

				}
			}

		}

		.join-btn {
			margin: 0 auto;
			width: 552rpx;
			height: 120rpx;
			background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
			border-radius: 60rpx;
			line-height: 120rpx;
			text-align: center;
			font-size: 32rpx;
			color: #ffffff;

		}

		.pay-wrap {
			background-color: #fff;
			text-align: center;
			// color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding-bottom: 110rpx;
		}

		.pay-title {
			padding: 32rpx 0 60rpx;
		}

		.pay-tips,
		.pay-project {
			color: #848484;
		}

		.pay-money {
			font-size: 50rpx;
			padding: 20rpx 0;
			color: #FF185E;
		}

		.vip-kaitong {



			margin: 0 auto;
			width: 552rpx;
			height: 120rpx;
			background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
			border-radius: 60rpx;
			line-height: 120rpx;
			text-align: center;
			font-size: 32rpx;
			color: #ffffff;

		}

		.pay-why-title {
			text-align: left;
			font-weight: 600;
			// color: #848484;
			line-height: 44rpx;
			padding: 0 28rpx;
		}

		.pay-why-content {
			text-align: left;
			font-size: 28rpx;
			color: #848484;
			;
			line-height: 40rpx;
			padding: 40rpx 28rpx;
		}


	}
</style>